<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="header">
				<view class="media-box">
					<three :src="detail.img_url" v-if="isGLB"></three>
					<view class="media" v-else>
						<view class="media-img-wrapper">
							<image mode="aspectFill" :src="detail.img_url"></image>
						</view>
					</view>
				</view>
				<view class="booth">
					<!-- <view class="goods__share">
						<form @submit="onClickShare">
							<button formType="submit" class="btn-normal dis-flex flex-center">
								<text class="share__icon dy-iconfont icon-share col-f"></text>
							</button>
						</form>
					</view> -->
					<!-- 藏品名称 -->
					<view class="goods-title dis-flex flex-center">
						<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/left5.png" mode="">
						</image>
						<text class="title col-f f-30 f-bold onelist-hidden--s">{{ detail.goods_name }}</text>
						<image class="flex-fixed" src="https://qiniu.wiod.cn/alc/right5.png" mode="">
						</image>
					</view>
					<!-- <view class="assets__no-wrapper m-top30 t-c">
						<view class="assets__no">
							<text>{{ detail.sort_no }}</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="content b-f">
				<view class="content-component">
					<view class="component-title">藏品信息</view>
					<view class="component-content f-28">
						
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">发行数量</view>
							<view class="content-value">{{ detail.total_num }}</view>
						</view>
						<view class="m-top20 dis-flex">
							<view class="content-key col-9">发行方</view>
							<view class="content-value">{{ detail.publisher_name }}</view>
						</view>
						<view class="m-top20">
							<view class="content-key col-9">藏品说明</view>
							<view class="dy-lineheight">
								<mp-html :content="nft_intro"></mp-html>
							</view>
						</view>
					</view>
				</view>
				<view class="content-component">
					<view class="component-title">发行方介绍</view>
					<view class="component-content">
						<view class="dy-lineheight">
							<mp-html :content="publisher_detail"></mp-html>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	import three from "@/components/three/index";
	export default {
		components: {
			navbar,
			three
		},
		data() {
			return {
				detail: {
					status: {
						value: 0
					},
					img_url:''
				},
				nft_intro:'',
				publisher_detail:'',
				// 分享海报底部菜单
				// shareActionsheetVisible: false,
				// forceDisabled: false,
			}
		},
		computed: {
			isGLB(){
				return this.detail.img_url.split('.').pop().toLowerCase() == 'glb' ? true : false
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.requestData();
		},
		onShow() {
			
		},
		onPullDownRefresh(e) {
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			let params = app.getShareUrlParams({
				'id': this.id
			});
			return {
				title: this.detail.goods_name,
				path: "/pages/market/detail/detail?" + params
			};
		},
		methods: {
			requestData: function(callback) {
				app._get('publisher/getPublisherSeriesGoods', {
					goods_id: this.id,
				}, (res) => {
					this.detail = res.data;
					app.configJweixin({
						title: res.data.goods_name,
						desc: '发现一款超赞的数字藏品，快来看看！',
						imgUrl: res.data.goods_image
					});
					try {
						this.nft_intro = this.escape2Html(res.data.nft_intro);
						this.publisher_detail = this.escape2Html(res.data.publisher_detail);
					} catch (e) {

					}
				}, null, () => {
					callback && callback();
				})
			},
			/**
			 * 显示分享选项
			 */
			// onClickShare(e) {
			// 	this.shareActionsheetVisible = true
			// },
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/utils/assets.scss';

	.header .media-img-wrapper {
		width: 464rpx;
		height: 464rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.header .media-img-wrapper image {
		width: 100%;
		height: 100%;
	}

	.content {
		background: $uni-goods-content-bg-color;
		border-radius: 20px 20px 0 0;
		padding: 20px;
		margin-top: -20px;
	}

	.content .component-title {
		font-size: 32rpx;
		color: $uni-goods-content-color-comp-title;
		font-weight: bold;
	}

	.content .component-content {
		background-color: $uni-goods-content-bg-color-comp;
		margin-top: 40rpx;
		padding: 30rpx;
		border-radius: 30rpx;
	}

	.content .content-component:nth-child(n+2) {
		margin-top: 70rpx;
	}

	.content .owner__avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.content .owner__avatar image {
		width: 100%;
		height: 100%;
	}

	.content .content-key {
		width: 170rpx;
		flex-shrink: 0;
	}

	.perfect-tips-placeholder {
		height: 100rpx;
	}

	.perfect-tips-container {
		width: 100%;
		height: 100rpx;
		background: #1c1c1c;
		padding: 0 20rpx;
		border-bottom: 1px solid #4b4a48;
		box-sizing: border-box;
	}

	.perfect-tips .perfect-tips__title text {
		color: #FF4400;
	}

	.perfect-tips .btn-perfect text {
		color: $uni-text-color-active;
	}

	/* 底部操作栏 */
	.footer-fixed {
		background-color: #1c1c1c;
		height: auto;
		display: inherit;
	}

	.footer-fixed-container {
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.footer-fixed .btn-purchase {
		min-width: 210rpx;
		height: 90rpx;
		border-radius: 46rpx;
		background: $uni-bg-color-main-linear;
		padding: 0 30rpx;
		color: #000;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.footer-fixed .btn-purchase[disabled] {
		background: $uni-btn-bg-color-disabled;
		color: $uni-btn-color-disabled;
	}
</style>
